<!-- <script setup>
// 第一种方法
import { Search } from "@element-plus/icons-vue";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(['update:modelValue'])
function handleKeywordChange(val) {
    emit('update:modelValue',{
        ...props.modelValue,
        keyword: val
    })
}
</script>
<template>
     <el-input          
     :modelValue="modelValue.keyword" 
     @update:modelValue="handleKeywordChange" 
     :placeholder="modelValue.placeholder">
       <template #prepend>
         <el-select
           v-model="modelValue.selectedValue"
           placeholder="Select"
           style="width: 85px"
         >
           <el-option
             v-for="item in modelValue.Options"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           >
           </el-option>
         </el-select>
       </template>
       <template #append>
         <el-button :icon="Search"></el-button>
       </template>
     </el-input>
   </template> 
   --->
<!-- <script setup>
// 第二种
import { Search } from "@element-plus/icons-vue";
import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue"]);
const model = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(obj, name, val) {
        console.log('emit', name ,val)
        emit("update:modelValue", {
          ...obj,
         [name]:val
        });
        return true;
      },
    });
  },
  set() {
    emit("update:modelValue", {
      ...props.modelValue,
      keyword: val,
    });
  },
});
</script>
<template>
  <el-input          
 v-model="model.keyword"
  :placeholder="model.placeholder">
    <template #prepend>
      <el-select
        v-model="model.selectedValue"
        placeholder="Select"
        style="width: 85px"
      >
        <el-option
          v-for="item in model.Options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search"></el-button>
    </template>
  </el-input>
  
</template>  -->
<script setup>
/**
 *  当封装表单组件的时候，有几种方式
 * **/
// 第三种是第二种的封装
// 封装
import { Search } from "@element-plus/icons-vue";
import { useVModel } from './useVModel.js'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:modelValue"]);
const model = useVModel(props, 'modelValue',emit)
</script>
<template>
  <el-input          
  v-model="model.keyword"
  :placeholder="model.placeholder">
    <template #prepend>
      <el-select
        v-model="model.selectedValue"
        placeholder="Select"
        style="width: 85px"
      >
        <el-option
          v-for="item in model.Options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
    <template #append>
      <el-button :icon="Search"></el-button>
    </template>
  </el-input>
</template> 
<!-- <script setup>
// 第一种方法
import { Search } from "@element-plus/icons-vue";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(['update:modelValue'])
function handleKeywordChange(val) {
    emit('update:modelValue',{
        ...props.modelValue,
        keyword: val
    })
}
</script>
<template>
     <el-input          
     :modelValue="modelValue.keyword" 
     @update:modelValue="handleKeywordChange" 
     :placeholder="modelValue.placeholder">
       <template #prepend>
         <el-select
           v-model="modelValue.selectedValue"
           placeholder="Select"
           style="width: 85px"
         >
           <el-option
             v-for="item in modelValue.Options"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           >
           </el-option>
         </el-select>
       </template>
       <template #append>
         <el-button :icon="Search"></el-button>
       </template>
     </el-input>
   </template> 
   --->